<template>
  <div class="homeCopy">
    <div id="print" contenteditable="true" class="print"></div>
    <el-button size="small" type="primary" @click="printPDFFn">打印</el-button>
  </div>
</template>
<script>
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
  methods: {
    printPDFFn() {
      let printDiv = document.getElementById("print");
      let fileName = "下载PDF";

      window.pageYoffset = 0;

      document.documentElement.scrollTop = 0;

      document.body.scrollTop = 0;
      // html2Canvas(printDiv, {
      //   //导出的html元素
      //   allowTaint: true,
      // }).then(function (canvas) {
      //   let contentWidth = canvas.width;
      //   let contentHeight = canvas.height;
      //   let pageHeight = (contentWidth / 592.28) * 841.89;
      //   let leftHeight = contentHeight;
      //   let position = 0;
      //   let imgWidth = 595.28;
      //   let imgHeight = (592.28 / contentWidth) * contentHeight;
      //   let pageData = canvas.toDataURL("image/jpeg", 1.0);
      //   let PDF = new JsPDF("", "pt", "a4");
      //   if (leftHeight < pageHeight) {
      //     PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
      //   } else {
      //     while (leftHeight > 0) {
      //       PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
      //       leftHeight -= pageHeight;
      //       position -= 841.89;
      //       if (leftHeight > 0) {
      //         PDF.addPage();
      //       }
      //     }
      //   }
      //   PDF.save(fileName + ".pdf");
      // });

      html2Canvas(printDiv).then((canvas) => {
        // a4 纸的尺寸[592.28,841.89]
        console.log(canvas);
        const A4_WIDTH = 592.28;
        const A4_HEIGHT = 841.89;
        let contentWidth = canvas.width; // 窗口可视区域宽度 * 2
        let contentHeight = canvas.height; // 窗口可视区域高度 * 2
        // 返回一个包含图片展示的 数据URL
        let pageData = canvas.toDataURL("image/jpeg", 1.0);
        // 一页 PDF html 页面生成的 canvas 高度
        let pageHeight = (contentWidth / A4_WIDTH) * A4_HEIGHT;
        // 未生成 PDF html 的页面高度
        let leftHeight = contentHeight;
        console.log("leftHeight", leftHeight, "pageHeight", pageHeight);
        // 页面偏移
        // eslint-disable
        let position = 0;
        // a4 纸的尺寸[592.28,841.89]，html 页面生成的 canvas 在 PDF 中图片的宽高
        let imgWidth = A4_WIDTH;
        let imgHeight = (A4_HEIGHT / contentWidth) * contentHeight;
        // 设置 PDF 的尺寸，PDF 要使用 pt 单位，已知 1pt/1px = 0.75  pt = (px/scale) * 0.75
        let pdf = new JsPDF("", "pt", "a4");
        // 有两个高度需要区分，一个是 html 页面的实际高度，和生成 PDF 的页面高度
        // 当内容未超过 PDF 一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          console.log(111);
          pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        } else {
          while (leftHeight > 0) {
            pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= A4_HEIGHT;
            // 避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }
        pdf.save(fileName + ".pdf");
      });
    },
  },
};
</script>
<style scoped>
.print {
  text-align: left;
  line-height: 24px;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>